<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome:</title>
    <link rel="stylesheet" href="css/cb1.css">
    <!-- 引入vue-->
    <script type="text/javascript" src="../vue/js/vue.js"></script>
</head>
<style>
@keyframes mymove
{
from {top:0px;}
to {top:400px;}
}
</style>
<body>
    <!--准备好一个容器-->
    <div id="header">
        <span id="span1">
            <h1 align="center">Welcome to 陈邦的法理伯爵领</h1>
            <h1 align="center">{{name}}</h1>
        </span>
        <h1 align="center">
            <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo3"><br>
        </h1>
        <h2 align="center">现在是北京时间：{{Date()}}</h2>
        <!-- <button v-on:click="showInfo">点我有惊喜</button>
        <button @click="showInfo2(888)">点我有惊喜</button> -->
        <nav>
            <a href="https://speech.ee.ntu.edu.tw/~hylee/ml/2021-spring.html">李宏毅2021</a>
            <a href="https://courses.d2l.ai/zh-v2/">李沐d2l</a>
        </nav>
    </div>
    <div id="keepl_1">

    </div>
    <div id="div_mid_l">
        <h1 align="center">战事沙盘</h1>
    </div>
    <div id="div_mid_m">
        <h1 align="center">中军大帐</h1>
    </div>
    <div id="div_mid_r">
        <h1 align="center">告示要闻</h1>
    </div>
    <div id="keepr_1">

    </div>
    <div id="keepl_2">

    </div>
    <div id="div_mid_ld">
        <p>首都名称:{{name}}</p>
        <p>首都地址:{{address}}</p>
        <a :href="url">点我去左军</a><br> <!-- v-bind: == : -->
        单向数据绑定: <input type="text" v-bind:value="name"><br>
        双向数据绑定: <input type="text" v-model="name"><!-- v-model只能用于输入类型的标签,必须有value值，可以省略:value -->
        <div id="div_mid_ld_1">
            <p>轻骑兵正在推进</p>
        </div>
        姓:<input type="text" v-model="firstName"><br>
        名:<input type="text" v-model="lastName"><br>
        全名:<span>{{fName}}</span>
    </div>
    <div id="div_mid_md">
        <p class="t" align="center">本阵主将：猫狗兄弟</p>
        <span id="catdog" align="center">
            <img src="imgs/catdog.jpg">
        </span>
        <div id="box">

        </div>
    </div>
    <div id="div_mid_rd">
        <p align="center">各路捷报</p>
        <h2 align="center">今日战场天气:{{info}}</h2>
        <div align="center"><button @click='changeW'>更新天气</button></div>
        <!-- <template></template> 用于包裹几个部分，但不会影响结构，比div好，可以使用v-if-->
        <h1 v-show="!isGood" style="font-size: 30px;">隐藏事件触发</h1>
        <ul>
            <li v-for="Army in Armys" :key="Army.id">{{Army.id}}-士气值-{{Army.morale}}</li>
        </ul>
    </div>
    <div id="keepr_2">

    </div>
    <div id="bottom">
        1111111
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false    //阻止启动时生成提示

        const vm1 = new Vue({
            el:'#div_mid_rd',
            data:{
                isGood:true,
                Armys:[
                    {id:'左军', morale:'85'},
                    {id:'中军', morale:'100'},
                    {id:'右军', morale:'65'},
                ]

            },
            computed:{
                info(){
                    return this.isGood ? '晴' : '雨'
                }
            },
            methods:{
                changeW(){
                    this.isGood = !this.isGood
                }
            },
            watch:{
                isGood:{
                    deep:true,//深度监视
                    handler(){
                        console.log('isGood has been changed')
                    }
                }
            }
        })

        new Vue({
            el:'#header',//el用于指定当前VUE实例为哪个容器服务。
            data:{  //data中用于存储数据，供el所指定的容器使用
                name:'贝班堡'
            },
            methods:{
                showInfo(){
                    alert('哇，金色愤怒的小鸡!')
                },
                showInfo2(number){
                    alert('哇，金色野猪!')
                    console.log(number)
                },
                showInfo3(e){
                    // alert('哇，金色野猪!')
                    console.log(e.target.value)
                }
            }
        })//创建vue实例
        const vm = new Vue({
            el:'#div_mid_ld',//el用于指定当前VUE实例为哪个容器服务。
            data:{  //data中用于存储数据，供el所指定的容器使用
                url:'mvvm.html',
                name:'巴黎',
                address:'奥尔良东北部',
                firstName:'陈',
                lastName:'邦',
            },
            computed:{
                //如果确定只用到get函数，可以简写为：
                // fName(){
                //     return this.firstName + this.lastName
                // },
                fName:{
                    get(){
                        return this.firstName + this.lastName
                    },
                    // set(value){
                    //     console.log('set',value)
                    // }
                }
            },
            methods:{
                fullName(){
                    return this.firstName + this.lastName
                }
            }
        })//创建vue实例

    </script>
</body> 
</html>